<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片热区超链接</title>
</head>
<body>
    <!-- 
        在一张图片上添加不同的超链接
        1. 插入图片
        2. 定义热区
            map 定义热区，可以包含多个area
            area  热区
                shape   形状，rect、circle、poly
                coords  坐标
                    rect   左上角和右下角的横坐标、纵坐标
                    circle 圆心的横纵坐标和半径。
                    poly   顶点的横纵坐标。
                href    链接地址
        创建热区的工具
        http://summerstyle.github.io/summer/

     -->
    <!-- <a href="//www.baidu.com/s?wd=mdn"><img src="img/web copy.png" alt=""></a> -->
    <img src="img/web copy.png" alt="" usemap="#html">
    <map name="html">
        <area shape="rect" coords="100,600,360,760" href="//www.baidu.com/s?wd=html" alt="">
        <area shape="circle" coords="1000,500,100" href="//www.baidu.com/s?wd=css" alt="">
    </map>
</body>
</html>